<template>
   <div class="footerNav">
        <div class="footerItem">
            <p class="iconfont icon-guanzhu"></p>
            <span style="margin-top: 0.15rem;">发现</span>
        </div>
        <div class="footerItem">
            <p class="iconfont icon-guanzhu1"></p>
            <span>播客</span>
        </div>
        <div class="footerItem">
            <p class="iconfont icon-music"></p>
            <span>我的</span>
        </div>
        <div class="footerItem">
            <p class="iconfont icon-wodeguanzhu"></p>
            <span>关注</span>
        </div>
        <div class="footerItem">
            <p class="iconfont icon-yinlemusic170"></p>
            <span>云村</span>
        </div>
   </div>
</template>

<script>
    import {reactive,toRefs,onMounted} from 'vue'
    // import {useRouter} from 'vue-router'
    // import axios from 'axios'
    export default{
        setup(){
           const state=reactive({
               id:1901371647,
               name:"孤勇者",
               pic:"https://p1.music.126.net/aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg?param=30y30",
               writer:"陈奕迅"
            })
        //    onMounted(async()=>{
        //         let res=await axios.get('hotTopic.json').then(res=>res.data.hot);
        //         res.forEach(e => {
        //             state.title.push(e.title);
        //         });
        //    })
        //    const router=useRouter();
        //    const toPlay=()=>{
        //        router.push({
        //           path:'/playSong',
        //           query:{
        //               pic:state.pic,
        //               name:state.naem,
        //               writer:state.writer
        //           }
        //        })
        //    }
           return{
               ...toRefs(state),
            //    toPlay
           }
        }
    }
</script>

<style>
/* .bofang{
  height: 0.7rem;
  margin:0.12rem 0 0rem 0.12rem;
  display: flex;
  align-items: center;
}
.bofang p{
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 5rem;
    overflow: hidden;
    margin-left: 0.2rem;
    color: white;
    font-weight: bold;
    font-size: 0.24rem;
} */
 .footerNav{
    width: 7rem;
    height: 1.2rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    color: black;
    font-weight: 600;
}
.footerItem p{
    font-size: 0.5rem; 
    padding: 0.2rem 0;
}
.footerItem span{
    font-size: 0.15rem;  
} 
</style>